<template>
  <div style="margin: 10px auto">
    <div class="carousel-margin">
      <el-carousel height="400px" :interval="10000" type="card">
        <!-- 遍历包含图片、链接、标题的对象数组 -->
        <el-carousel-item v-for="(item, index) in carousels" :key="index">
          <!-- 超链接容器：整项可点击，target="_blank"新窗口打开 -->
          <a :href="item.link" target="_blank" class="carousel-link">
            <img :src="item.cover" class="carousel-img">
            <!-- 轮播标题：底部半透明悬浮层 -->
            <div class="carousel-title">{{ item.name }}</div>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="container">
        <div class="search-content">
          <!-- 搜索框 -->
          <el-row class="search-box-row">
            <el-col :span="20">
              <el-input size="medium" placeholder="搜索书名、作者、ISBN或关键词..." v-model="searchKeyword" class="search-input"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" class="search-btn" @click="goPage('/front/category?name=' + searchKeyword)">
                <i class="el-icon-search mr-2"></i>搜索
              </el-button>
            </el-col>
          </el-row>

          <!-- 热门搜索标签 -->
          <div class="hot-tags">
            <span class="tag-label">热门搜索:</span>
            <el-tag v-for="(category, index) in categories" :key="index" type="text" class="search-tag" @click="goPage('/front/category?selectedCategoryId=' + category.id)">{{ category.name }}</el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content container">
      <!-- 新书推荐 -->
      <div class="new-books-section">
        <div class="section-header">
          <h2 class="section-title">新书上架</h2>
          <div class="section-nav">
            <el-link type="primary" class="section-more" :underline="false"  href="/front/category">查看全部图书 <i class="el-icon-arrow-right"></i></el-link>
          </div>
        </div>

        <el-row :gutter="10" class="books-grid">
          <el-col :span="6" v-for="(book, index) in newBooks" :key="index" >
            <el-card class="book-card" :body-style="{ padding: '0px' }">
              <div class="book-img-container">
                <img :src="book.cover" fit="cover" class="book-img"/>
                <el-tag class="new-tag">新书</el-tag>
              </div>
              <div class="book-info">
                <h3 class="book-title">{{ book.name }}</h3>
                <p class="book-author">{{ book.descr }}</p>
                <div class="book-publisher">
                  <span class="publisher-info">{{ book.author }}</span>
                </div>
                <div class="book-actions">
                  <el-tag type="success" class="status-tag">
                    {{categories.find(v => v.id === book.categoryId)?.name || "未知类型" }}
                  </el-tag>
                  <el-button type="primary" size="mini" @click="goPage('/front/bookDetail?id=' + book.id)">
                    详情
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 借阅统计与热门图书 -->
      <el-row :gutter="20" class="stats-and-hot">
        <!-- 图书馆公告 -->
        <el-col :span="16">
          <div class="notices-section">
            <div class="section-header">
              <h2 class="section-title">图书馆公告</h2>
              <el-link type="primary" class="section-more" :underline="false" href="/front/notice">
                查看全部公告 <i class="el-icon-arrow-right"></i>
              </el-link>
            </div>

            <div class="notices-card" v-for="(notice, index) in notices" :key="index"  @click="goPage('/front/noticeDetail?id=' + notice.id)">
              <el-card class="notice-item" >
                <div class="notice-header">
                  <h3 class="notice-title">{{ notice.name }}</h3>
                  <span style="color: #909399">{{notice.time}}</span>
                </div>
                <p class="notice-content">{{ notice.descr }}</p>
              </el-card>
            </div>
          </div>
        </el-col>
        <!-- 热门图书 -->
        <el-col :span="8">
          <div class="section-header">
            <h2 class="section-title">热门图书</h2>
            <el-link type="primary" class="section-more" :underline="false" href="/front/category">
              查看全部图书 <i class="el-icon-arrow-right"></i>
            </el-link>
          </div>
          <el-card class="hot-books-card">
            <div class="hot-books-list">
              <div class="hot-book-item" v-for="(book, index) in hotBooks" :key="index"  @click="goPage('/front/bookDetail?id=' + book.id)">
                <div class="rank-number" :style="{ backgroundColor: '#FFD700' }" v-if="index == 0">
                  {{ index + 1 }}
                </div>
                <div class="rank-number" :style="{ backgroundColor: '#F57C00' }" v-else-if="index == 1">
                  {{ index + 1 }}
                </div>
                <div class="rank-number" :style="{ backgroundColor: '#9E9E9E' }" v-else-if="index == 2">
                  {{ index + 1 }}
                </div>
                <div class="rank-number" :style="{ backgroundColor: '#C0C0C0' }" v-else>
                  {{ index + 1 }}
                </div>
                <img :src="book.cover" :alt="book.title" class="hot-book-img">
                <div class="hot-book-info">
                  <h4 class="hot-book-title">{{ book.name }}</h4>
                  <p class="hot-book-author">{{ book.author }}</p>
                  <p class="count-label">借阅次数：<span class="count-value">{{book.borrowCount}}</span></p>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      searchKeyword: '',
      categories: [],
      newBooks:[{name: ''}],
      hotBooks: [],
      notices: [],
      books: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tagMap: {},
      selectedCategoryId: this.$route.query.selectedCategoryId,
      carousels: []
    }
  },
  created() {
    this.loadNotice()
    this.load()
  },
  methods: {
    loadNotice(){
      this.$request.get("/notice").then(res => {
        this.notices = res.data || []
      })
    },
    load() {
      this.$request.get("/book/newBook").then(res => {
        this.newBooks = res.data
      })

      this.$request.get("/book/hotBook").then(res => {
        this.hotBooks = res.data
      })

      this.$request.get("/category").then(res => {
        this.categories = res.data
      })

      this.$request.get("/carousel").then(res => {
        this.carousels = res.data.splice(0,3).map((item, index) => {
          return {
            name: item.name,
            cover: item.cover,
            link: `/front/bookDetail?id=${item.bookId}`,
          };
        })
      })
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    goPage(path) {
      location.href = path;
    },
  }
}
</script>

<style scoped>
/* 基础样式 */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 搜索区域样式 */
.search-section {
  padding: 10px 0;
  color: #fff;
}

.search-content {
  text-align: center;
}

.search-box-row {
  margin-bottom: 10px;
}

.search-input {
  height: 38px;
  border-radius: 24px 0 0 24px;
  border: none;
  padding: 0 20px;
}

.search-btn {
  height: 37px;
  width: 100%;
  background-color: #67C23A;
  border-color: #67C23A;
}

.search-btn:hover {
  background-color: #88cc66 !important;      /* 基础背景色 */
  border-color: #88cc66 !important;          /* 去掉默认边框 */
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
}

.tag-label {
  color: #909399;
}

.search-tag {
  background-color: #F2F6FC;
  color: #909399;
  border: none;
  cursor: pointer;
}

.search-tag:hover {
  background-color: #F2F6FC;
  color: #409EFF;
  border: none;
  cursor: pointer;
}


/* 主内容区样式 */
.main-content {
  padding: 30px 0;
}

.primary-card .card-icon {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

.warning-card .card-icon {
  background-color: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.purple-card .card-icon {
  background-color: rgba(156, 39, 176, 0.1);
  color: #9C27B0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

/* 新书区域样式 */
.new-books-section {
  margin-bottom: 40px;
}

.section-nav {
  display: flex;
  gap: 5px;
}

.books-grid {
  margin-bottom: 20px;
}

.book-card {
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.8s;
  margin-top: 5px;
}

.book-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.book-img-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.book-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.book-card:hover .book-img {
  transform: scale(1.05);
}

.new-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #F97316;
  color: #fff;
  border: none;
}

.book-info {
  padding: 15px;
}

.book-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-author {
  font-size: 13px;
  color: #606266;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-publisher {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
}

.book-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-tag {
  padding: 2px 5px;
  height: auto;
  line-height: 1;
}

/* 统计与热门图书样式 */
.stats-and-hot {
  margin-bottom: 40px;
}

.hot-books-card {
  height: 100%;
}

.hot-books-list {
  padding: 10px 0;
}

.hot-book-item {
  display: flex;
  align-items: center;
  padding: 8px 15px;
  transition: background-color 0.2s;
}

.hot-book-item:hover {
  background-color: #F5F7FA;
}

.rank-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  margin-right: 15px;
}

.hot-book-img {
  width: 60px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.hot-book-info {
  flex: 1;
}

.hot-book-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px;
  max-width: 10em; /* 1em 约等于当前字体大小，20em 适合常规字体的20字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-book-author {
  font-size: 13px;
  color: #606266;
  margin: 0 0 5px;
}

.count-label {
  font-size: 13px;
  color: #909399;
  margin: 0 0 5px;
}

.count-value {
  font-size: 18px;
  font-weight: bold;
  color: #3B82F6;
}

/* 公告区域样式 */
.notices-section {
  margin-bottom: 40px;
}

.notices-card {
  border-radius: 8px;
}

.notice-item {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s;
}

.notice-item:hover {
  background-color: #f5f7fa;  /* 浅灰色背景，区分选中状态 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强层次感 */}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.notice-title {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.notice-content {
  font-size: 13px;
  color: #606266;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.carousel-margin{
  width: 80%;
  margin: 10px auto;
}
/* 超链接容器：占满轮播项，确保整项可点击 */
.carousel-link {
  display: block;
  height: 100%;
  position: relative;
  overflow: hidden;
}
/* 轮播图片：保持填充容器 */
.carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 防止图片拉伸变形 */
}
/* 轮播标题：底部半透明悬浮层 */
.carousel-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7)); /* 渐变背景，更美观 */
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 标题过长时显示省略号 */
  text-align: center;
}

a {
  color: #333;
  text-decoration: none;
}
</style>
